<template>
  <div class="image-viewer">
    <a-space class="toolbar">
      <a-space class="tool-group">
        <a-tooltip content="放大">
          <a-button class="tool-btn" size="small" @click="increaseZoom"><icon-zoom-in /></a-button>
        </a-tooltip>
        <a-tooltip content="缩小">
          <a-button class="tool-btn" size="small" @click="decreaseZoom"><icon-zoom-out /></a-button>
        </a-tooltip>
        <a-tooltip content="适应窗口">
          <a-button class="tool-btn" size="small" @click="fitToWindow"><icon-fullscreen /></a-button>
        </a-tooltip>
        <a-tooltip content="原始大小">
          <a-button class="tool-btn" size="small" @click="resetZoom"><icon-fullscreen-exit /></a-button>
        </a-tooltip>
      </a-space>
      <a-divider direction="vertical" />
      <a-space class="tool-group">
        <a-tooltip content="旋转">
          <a-button class="tool-btn" size="small" @click="rotateRight"><icon-refresh /></a-button>
        </a-tooltip>
        <a-tooltip content="翻转">
          <a-button class="tool-btn" size="small" @click="flipImage"><icon-swap /></a-button>
        </a-tooltip>
      </a-space>
      <a-divider direction="vertical" />
      <a-space class="tool-group">
        <a-dropdown trigger="click">
          <a-tooltip content="窗宽窗位">
            <a-button class="tool-btn" size="small"><icon-settings /></a-button>
          </a-tooltip>
          <template #content>
            <a-doption v-for="preset in ctPresets" :key="preset.name" @click="changePreset(preset)">
              {{ preset.name }} (W:{{ preset.width }}, C:{{ preset.center }})
            </a-doption>
          </template>
        </a-dropdown>
        <a-tooltip content="测量">
          <a-button class="tool-btn" size="small"><icon-drag-arrow /></a-button>
        </a-tooltip>
        <a-tooltip content="标注">
          <a-button class="tool-btn" size="small"><icon-edit /></a-button>
        </a-tooltip>
      </a-space>
      <a-divider direction="vertical" />
      <a-space class="tool-group">
        <a-tag size="small">{{ currentPreset.name }}</a-tag>
        <a-tag size="small">W:{{ currentPreset.width }}</a-tag>
        <a-tag size="small">C:{{ currentPreset.center }}</a-tag>
      </a-space>
    </a-space>
    
    <div class="viewer-container">
      <!-- 左侧缩略图面板 -->
      <div class="thumbnail-panel" :class="{ 'panel-collapsed': leftPanelCollapsed }">
        <div class="panel-toggle left-panel-toggle" @click="toggleLeftPanel">
          <icon-left v-if="!leftPanelCollapsed" />
          <icon-right v-else />
        </div>
        
        <div v-show="!leftPanelCollapsed" class="thumbnail-content">
          <div class="thumbnail-header" v-if="images.length > 0">
            <span>图像列表 ({{ selectedIndex + 1 }}/{{ images.length }})</span>
          </div>
          <div class="loading-container" v-if="isLoading">
            <a-spin />
            <div class="loading-text">加载图像中...</div>
          </div>
          <div class="error-container" v-else-if="loadError">
            <a-result status="error" :subtitle="loadError">
              <template #extra>
                <a-button type="primary" @click="loadImagesFromBackend">重试</a-button>
              </template>
            </a-result>
          </div>
          <a-scrollbar v-else style="height: 100%;">
            <div class="thumbnail-list">
              <div 
                v-for="(image, index) in images" 
                :key="index" 
                class="thumbnail-item"
                :class="{ active: selectedIndex === index }"
                @click="selectImage(index)"
              >
                <div class="thumbnail-wrapper">
                  <img :src="getImageUrl(image)" alt="缩略图" />
                </div>
                <div class="thumbnail-info">{{ image.name || `图像 ${index + 1}` }}</div>
                <div class="thumbnail-location">{{ image.sliceLocation || '' }}</div>
              </div>
            </div>
          </a-scrollbar>
        </div>
      </div>
      
      <!-- 主图像查看区 -->
      <div class="main-viewer">
        <div class="image-container" ref="imageContainer">
          <a-spin v-if="isLoading" />
          <a-empty v-else-if="!selectedImage" description="请选择一张图像" />
          <img 
            v-else
            :src="getImageUrl(selectedImage)" 
            :alt="selectedImage.name || `图像 ${selectedIndex + 1}`" 
            class="main-image"
            :style="imageStyle"
            @error="handleImageError"
          />
          
          <div class="image-overlay" v-if="selectedImage">
            <div class="overlay-top-left">{{ selectedImage?.name || `图像 ${selectedIndex + 1}` }}</div>
            <div class="overlay-top-right">缩放: {{ zoomLevel }}%</div>
            <div class="overlay-bottom-left">{{ selectedImage?.sliceLocation || '' }} {{ selectedImage?.sliceThickness || '' }}</div>
            <div class="overlay-bottom-right">W:{{ currentPreset.width }} C:{{ currentPreset.center }}</div>
          </div>
        </div>
        
        <!-- 右侧信息面板 -->
        <div class="image-info-panel" :class="{ 'panel-collapsed': rightPanelCollapsed }">
          <div class="panel-toggle right-panel-toggle" @click="toggleRightPanel">
            <icon-right v-if="!rightPanelCollapsed" />
            <icon-left v-else />
          </div>
          
          <template v-if="!rightPanelCollapsed">
            <div class="panel-header">
              <span>图像调整</span>
            </div>
            
            <div class="panel-content">
              <div class="adjustment-item">
                <div class="adjustment-label">亮度</div>
                <div class="adjustment-control">
                  <a-slider
                    v-model="brightness"
                    :min="-100"
                    :max="100"
                    :step="1"
                    @change="applyImageAdjustments"
                  />
                  <div class="adjustment-value">{{ brightness }}</div>
                </div>
              </div>
              
              <div class="adjustment-item">
                <div class="adjustment-label">对比度</div>
                <div class="adjustment-control">
                  <a-slider
                    v-model="contrast"
                    :min="-100"
                    :max="100"
                    :step="1"
                    @change="applyImageAdjustments"
                  />
                  <div class="adjustment-value">{{ contrast }}</div>
                </div>
              </div>
              
              <div class="adjustment-item">
                <div class="adjustment-label">缩放</div>
                <div class="adjustment-control">
                  <a-slider
                    v-model="zoomLevel"
                    :min="50"
                    :max="200"
                    :step="5"
                    @change="applyZoom"
                  />
                  <div class="adjustment-value">{{ zoomLevel }}</div>
                </div>
              </div>
              
              <div class="adjustment-item">
                <div class="adjustment-label">旋转</div>
                <div class="rotation-buttons">
                  <a-button @click="rotateLeft" class="rotation-button">
                    <template #icon><icon-rotate-left /></template>
                    向左旋转
                  </a-button>
                  <a-button @click="rotateRight" class="rotation-button">
                    <template #icon><icon-rotate-right /></template>
                    向右旋转
                  </a-button>
                </div>
              </div>
              
              <div class="adjustment-item">
                <div class="adjustment-label">窗宽窗位</div>
                <div class="preset-buttons">
                  <a-button-group>
                    <a-button 
                      v-for="(preset, index) in ctPresets" 
                      :key="preset.name"
                      :type="currentPresetIndex === index ? 'primary' : 'outline'"
                      @click="() => { currentPresetIndex = index; updatePreset(); }"
                    >
                      {{ preset.name }}
                    </a-button>
                  </a-button-group>
                </div>
                
                <div class="window-slider">
                  <div class="window-label">窗宽 (W): {{ currentPreset.width }}</div>
                  <a-slider
                    v-model="windowWidth"
                    :min="50"
                    :max="4000"
                    :step="50"
                    @change="updateWindowSettings"
                  />
                </div>
                
                <div class="window-slider">
                  <div class="window-label">窗位 (C): {{ currentPreset.center }}</div>
                  <a-slider
                    v-model="windowCenter"
                    :min="-1000"
                    :max="1000"
                    :step="10"
                    @change="updateWindowSettings"
                  />
                </div>
                
                <div class="window-value">
                  W:{{ currentPreset.width }} C:{{ currentPreset.center }}
                </div>
              </div>
            </div>
            
            <div class="panel-footer">
              <a-button 
                type="primary" 
                danger
                class="reset-button" 
                @click="resetAdjustments"
              >
                重置调整
              </a-button>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue';
import { 
  IconZoomIn, 
  IconZoomOut, 
  IconFullscreen, 
  IconFullscreenExit,
  IconRefresh,
  IconSwap,
  IconDragArrow,
  IconEdit,
  IconRotateLeft,
  IconRotateRight,
  IconMinus,
  IconPlus,
  IconLeft,
  IconRight
} from '@arco-design/web-vue/es/icon';
import IconSettings from '@arco-design/web-vue/es/icon/icon-settings';
import axios from 'axios';
import { imageApi } from '../services/api';

// 定义图像接口类型
interface ImageType {
  id?: string;
  name?: string;
  path?: string;
  thumbnailPath?: string;
  type?: string;
  sliceLocation?: string;
  sliceThickness?: string;
  device?: string;
  filename?: string; // 后端返回的文件名
}

// 定义组件接收的属性
const props = defineProps({
  // 接收用户上传的图像数组
  userImages: {
    type: Array as () => ImageType[],
    default: () => []
  },
  // 患者信息（可选）
  patientInfo: {
    type: Object,
    default: () => ({
      name: '',
      id: '',
      age: '',
      gender: '',
      checkDate: '',
      department: ''
    })
  },
  // 是否从后端加载图像
  loadFromBackend: {
    type: Boolean,
    default: true
  },
  // 后端API基础URL
  apiBaseUrl: {
    type: String,
    default: 'http://localhost:5000'
  },
  // 图像路径（如果有特定路径）
  imagePath: {
    type: String,
    default: '/static/uploads'
  }
});

// 计算患者信息数据
const patientInfoData = computed(() => [
  {
    label: '姓名',
    value: props.patientInfo.name
  },
  {
    label: 'ID',
    value: props.patientInfo.id
  },
  {
    label: '年龄',
    value: props.patientInfo.age
  },
  {
    label: '性别',
    value: props.patientInfo.gender
  },
  {
    label: '检查日期',
    value: props.patientInfo.checkDate
  },
  {
    label: '科室',
    value: props.patientInfo.department
  }
]);

// 使用传入的图像或空数组
const images = ref<ImageType[]>(props.userImages || []);
const isLoading = ref(false);
const loadError = ref('');

// 获取图像URL的方法
const getImageUrl = (image: ImageType) => {
  if (!image) return '';
  
  // 如果图像有完整URL路径，直接返回
  if (image.path && image.path.startsWith('http')) {
    return image.path;
  }
  
  // 处理相对路径，拼接基础URL
  if (image.path && image.path.startsWith('/')) {
    return `${props.apiBaseUrl}${image.path}`;
  }
  
  // 如果有文件名，从后端获取
  if (image.filename) {
    return `${props.apiBaseUrl}${props.imagePath}/${image.filename}`;
  }
  
  return '';
};

// 从后端加载图像
const loadImagesFromBackend = async () => {
  if (!props.loadFromBackend) return;
  
  isLoading.value = true;
  loadError.value = '';
  
  try {
    // 使用API获取分割结果图像
    const response = await imageApi.getResults();
    
    if (response && response.success && response.results && response.results.length > 0) {
      // 将API返回的结果转换为图像对象数组
      const imagesList: ImageType[] = response.results.map((result: any) => {
        return {
          id: result.id,
          name: result.name,
          path: result.url,
          type: result.type,
          sliceLocation: '胸部',
          sliceThickness: '3mm',
          timestamp: result.timestamp
        };
      });
      
      // 设置图像列表
      images.value = imagesList;
      
      // 如果有图像，选择第一张
      if (images.value.length > 0) {
        selectedIndex.value = 0;
      }
      
      console.log('已加载图像:', images.value.length);
    } else {
      // 如果API返回为空或失败，尝试使用硬编码的图像列表
      console.warn('API返回为空或失败，使用硬编码的图像列表');
      
      const directoryPath = props.imagePath || '/static/results';
      
      // 直接构建图像URL，不需要API调用获取文件列表
      const imageUrls = [
        '07a4d770-361d-4bba-9bba-f741ab67d0a6_mask.png',
        '07a4d770-361d-4bba-9bba-f741ab67d0a6_overlay.png',
        '07a4d770-361d-4bba-9bba-f741ab67d0a6_prob.png',
        '07a4d770-361d-4bba-9bba-f741ab67d0a6_vis.png',
        '8f298d92-002d-4cf0-9acf-f89557d4e0b5_mask.png',
        '8f298d92-002d-4cf0-9acf-f89557d4e0b5_overlay.png',
        '8f298d92-002d-4cf0-9acf-f89557d4e0b5_prob.png',
        '8f298d92-002d-4cf0-9acf-f89557d4e0b5_vis.png',
        'db437095-d158-4d6e-81fc-44517ca5101c_mask.png',
        'db437095-d158-4d6e-81fc-44517ca5101c_overlay.png',
        'db437095-d158-4d6e-81fc-44517ca5101c_prob.png',
        'db437095-d158-4d6e-81fc-44517ca5101c_vis.png',
        'f2ca956e-aee8-4ead-84d5-48d4785f4333_mask.png'
      ];
      
      // 将文件列表转换为图像对象数组
      const imagesList: ImageType[] = imageUrls.map((filename: string, index: number) => {
        // 从文件名中提取信息
        const nameParts = filename.split('_');
        const id = nameParts[0] || '';
        const type = nameParts[1]?.replace('.png', '') || '';
        
        return {
          id,
          name: `肺部CT图像 ${index + 1} (${type})`,
          path: `${directoryPath}/${filename}`,
          filename,
          type: 'CT',
          sliceLocation: '胸部',
          sliceThickness: '3mm'
        };
      });
      
      // 设置图像列表
      images.value = imagesList;
      
      // 如果有图像，选择第一张
      if (images.value.length > 0) {
        selectedIndex.value = 0;
      }
    }
  } catch (error) {
    console.error('加载图像失败:', error);
    loadError.value = '加载图像失败，请检查网络连接或后端服务是否正常运行。';
  } finally {
    isLoading.value = false;
  }
};

// 加载过滤后的图像列表
const loadFilteredImages = (results: any[]) => {
  isLoading.value = true;
  loadError.value = '';
  
  try {
    if (results && results.length > 0) {
      // 将API返回的结果转换为图像对象数组
      const imagesList: ImageType[] = results.map((result: any) => {
        return {
          id: result.id,
          name: result.name,
          path: result.url,
          type: result.type,
          sliceLocation: '胸部',
          sliceThickness: '3mm',
          timestamp: result.timestamp
        };
      });
      
      // 设置图像列表
      images.value = imagesList;
      
      // 如果有图像，选择第一张
      if (images.value.length > 0) {
        selectedIndex.value = 0;
      }
      
      console.log('已加载过滤后的图像:', images.value.length);
    } else {
      loadError.value = '未找到符合条件的图像';
    }
  } catch (error) {
    console.error('加载过滤后的图像失败:', error);
    loadError.value = '加载图像失败，请检查数据格式是否正确。';
  } finally {
    isLoading.value = false;
  }
};

// 组件挂载时加载图像
onMounted(() => {
  console.log('组件挂载，开始加载图像');
  console.log('loadFromBackend:', props.loadFromBackend);
  console.log('apiBaseUrl:', props.apiBaseUrl);
  console.log('imagePath:', props.imagePath);
  
  if (props.loadFromBackend) {
    loadImagesFromBackend();
  }
});

// 监听props变化，更新内部状态
watch(() => props.userImages, (newImages) => {
  if (newImages && newImages.length > 0) {
    images.value = newImages;
    // 如果有图像且未选择，则默认选择第一张
    if (images.value.length > 0 && selectedIndex.value >= images.value.length) {
      selectedIndex.value = 0;
    }
  }
}, { deep: true });

const selectedIndex = ref(0);
const selectedImage = computed<ImageType | null>(() => images.value[selectedIndex.value] || null);

const imageInfoData = computed(() => {
  if (!selectedImage.value) return [];
  return [
    {
      label: '检查类型',
      value: selectedImage.value.type || 'CT'
    },
    {
      label: '层面位置',
      value: selectedImage.value.sliceLocation || '-'
    },
    {
      label: '层厚',
      value: selectedImage.value.sliceThickness || '-'
    },
    {
      label: '设备',
      value: selectedImage.value.device || '-'
    }
  ];
});

// 添加面板收起状态控制
const leftPanelCollapsed = ref(false);
const rightPanelCollapsed = ref(false);

// 切换左侧面板显示/隐藏
const toggleLeftPanel = () => {
  leftPanelCollapsed.value = !leftPanelCollapsed.value;
};

// 切换右侧面板显示/隐藏
const toggleRightPanel = () => {
  rightPanelCollapsed.value = !rightPanelCollapsed.value;
};

const selectImage = (index: number) => {
  if (index >= 0 && index < images.value.length) {
    selectedIndex.value = index;
  }
};

// 肺部CT相关的窗宽窗位预设
interface CTPreset {
  name: string;
  width: number;
  center: number;
}

const ctPresets: CTPreset[] = [
  { name: '肺窗', width: 1500, center: -600 },
  { name: '纵隔窗', width: 350, center: 40 },
  { name: '骨窗', width: 2000, center: 500 }
];

const currentPreset = ref(ctPresets[0]);
const currentPresetIndex = ref(0);
const windowWidth = ref(ctPresets[0].width);
const windowCenter = ref(ctPresets[0].center);

// 图像调整相关参数
const brightness = ref(0);
const contrast = ref(0);
const zoomLevel = ref(100);
const rotation = ref(0);
const isFlipped = ref(false);

// 计算图像样式
const imageStyle = computed(() => {
  const flipTransform = isFlipped.value ? 'scaleX(-1)' : '';
  return {
    filter: `brightness(${100 + brightness.value}%) contrast(${100 + contrast.value}%)`,
    transform: `scale(${zoomLevel.value / 100}) rotate(${rotation.value}deg) ${flipTransform}`,
    transition: 'transform 0.3s ease, filter 0.3s ease'
  };
});

// 应用图像调整
const applyImageAdjustments = () => {
  // 实际应用已通过计算属性自动完成
};

// 缩放控制
const applyZoom = () => {
  // 实际应用已通过计算属性自动完成
};

const increaseZoom = () => {
  zoomLevel.value = Math.min(zoomLevel.value + 10, 200);
  applyZoom();
};

const decreaseZoom = () => {
  zoomLevel.value = Math.max(zoomLevel.value - 10, 50);
  applyZoom();
};

const fitToWindow = () => {
  // 适应窗口大小，设置为合适的缩放比例
  zoomLevel.value = 100; // 这里简化为100%，实际应根据图像和容器尺寸计算
  applyZoom();
};

const resetZoom = () => {
  // 重置为原始大小
  zoomLevel.value = 100;
  applyZoom();
};

// 旋转和翻转控制
const rotateLeft = () => {
  rotation.value = (rotation.value - 90) % 360;
};

const rotateRight = () => {
  rotation.value = (rotation.value + 90) % 360;
};

const flipImage = () => {
  isFlipped.value = !isFlipped.value;
};

// 窗宽窗位设置
const updatePreset = () => {
  const preset = ctPresets[currentPresetIndex.value];
  currentPreset.value = preset;
  windowWidth.value = preset.width;
  windowCenter.value = preset.center;
};

const updateWindowSettings = () => {
  currentPreset.value = {
    name: '自定义',
    width: windowWidth.value,
    center: windowCenter.value
  };
};

// 重置所有调整
const resetAdjustments = () => {
  brightness.value = 0;
  contrast.value = 0;
  zoomLevel.value = 100;
  rotation.value = 0;
  isFlipped.value = false;
  currentPresetIndex.value = 0;
  updatePreset();
};

// 更新窗宽窗位预设的方法
const changePreset = (preset: CTPreset) => {
  currentPreset.value = preset;
  windowWidth.value = preset.width;
  windowCenter.value = preset.center;
  
  // 查找预设索引
  const index = ctPresets.findIndex(p => p.name === preset.name);
  if (index !== -1) {
    currentPresetIndex.value = index;
  }
};

const handleImageError = () => {
  console.error('图像加载失败');
  loadError.value = '图像加载失败，请检查网络连接或后端服务是否正常运行。';
};

// 导出组件方法
defineExpose({
  loadImagesFromBackend,
  loadFilteredImages
});
</script>

<style scoped>
.image-viewer {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: var(--color-fill-2);
  color: var(--color-text-1);
}

.toolbar {
  padding: var(--spacing-sm) var(--spacing-lg);
  background-color: var(--color-bg-2);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.tool-group {
  margin-right: var(--spacing-md);
}

.viewer-container {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.thumbnail-panel {
  width: 220px;
  background-color: var(--color-bg-2);
  border-right: 1px solid var(--color-border);
  position: relative;
  transition: width 0.3s ease;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

.thumbnail-content {
  padding: var(--spacing-md);
  height: 100%;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.thumbnail-panel.panel-collapsed {
  width: 30px;
  padding: 0;
}

.panel-toggle {
  position: absolute;
  top: 50%;
  width: 24px;
  height: 60px;
  background-color: var(--color-bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid var(--color-border);
  z-index: 100;
  transform: translateY(-50%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.panel-toggle:hover {
  background-color: var(--color-fill-3);
}

.left-panel-toggle {
  right: -24px;
  border-radius: 0 4px 4px 0;
}

.right-panel-toggle {
  left: -24px;
  border-radius: 4px 0 0 4px;
}

.loading-container,
.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
  height: 200px;
  flex: 1;
}

.loading-text {
  margin-top: var(--spacing-md);
  color: var(--color-text-3);
}

.thumbnail-item {
  margin-bottom: var(--spacing-md);
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.thumbnail-item.active {
  border-color: rgb(var(--primary-6));
  box-shadow: 0 2px 10px rgba(var(--primary-6), 0.2);
}

.thumbnail-item:hover:not(.active) {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.thumbnail-wrapper {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-fill-1);
}

.thumbnail-wrapper img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.thumbnail-info {
  font-size: 13px;
  padding: var(--spacing-sm) var(--spacing-sm);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.thumbnail-location {
  font-size: 12px;
  color: var(--color-text-3);
  text-align: center;
  padding-bottom: var(--spacing-sm);
}

.main-viewer {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.image-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  position: relative;
  overflow: hidden;
}

.main-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  padding: var(--spacing-lg);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.overlay-top-left {
  position: absolute;
  top: var(--spacing-lg);
  left: var(--spacing-lg);
  font-weight: 500;
}

.overlay-top-right {
  position: absolute;
  top: var(--spacing-lg);
  right: var(--spacing-lg);
  font-weight: 500;
}

.overlay-bottom-left {
  position: absolute;
  bottom: var(--spacing-lg);
  left: var(--spacing-lg);
}

.overlay-bottom-right {
  position: absolute;
  bottom: var(--spacing-lg);
  right: var(--spacing-lg);
}

.image-info-panel {
  width: 280px;
  background-color: var(--color-bg-2);
  border-left: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  transition: width 0.3s ease;
}

.image-info-panel.panel-collapsed {
  width: 30px;
}

.panel-header {
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid var(--color-border-2);
}

.panel-content {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.panel-footer {
  padding: 16px;
  border-top: 1px solid var(--color-border-2);
  background-color: var(--color-bg-1);
}

.adjustment-item {
  margin-bottom: 24px;
}

.adjustment-label {
  font-weight: 500;
  margin-bottom: 8px;
}

.adjustment-control {
  display: flex;
  align-items: center;
}

.adjustment-value {
  min-width: 40px;
  text-align: right;
  margin-left: 12px;
}

.rotation-buttons {
  display: flex;
  gap: 8px;
}

.rotation-button {
  flex: 1;
}

.preset-buttons {
  margin-bottom: 16px;
}

:deep(.arco-btn-group) {
  display: flex;
  width: 100%;
}

:deep(.arco-btn-group .arco-btn) {
  flex: 1;
}

.window-slider {
  margin-bottom: 12px;
}

.window-label {
  font-size: 12px;
  color: var(--color-text-3);
  margin-bottom: 4px;
}

.window-value {
  text-align: center;
  padding: 8px;
  background-color: var(--color-fill-2);
  border-radius: 4px;
  margin-top: 16px;
  font-weight: 500;
}

.reset-button {
  width: 100%;
  height: 40px;
  font-size: 16px;
}

:deep(.arco-scrollbar) {
  height: 100%;
  overflow: hidden;
}

:deep(.arco-scrollbar-container) {
  height: 100%;
  overflow-y: auto;
}

:deep(.arco-scrollbar-track-direction-vertical) {
  right: 0;
}

.thumbnail-list {
  padding: 4px;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.thumbnail-header {
  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
  font-weight: 500;
  font-size: 14px;
  color: var(--color-text-2);
  border-bottom: 1px solid var(--color-border-2);
  margin-bottom: var(--spacing-sm);
}
</style> 